import React 				from 'react';
import PageTitle    from 'component/pagetitle/index.jsx';
import Pagination 	from 'util/pagination/index.jsx';
import MUtil        from 'util/mm.jsx'
import User         from 'service/user-service.jsx'
import TableView		from 'component/tableview/index.jsx';

const _util = new MUtil();
const _user = new User();
class UserList extends React.Component{
	
	constructor(props){
		super(props);
		this.state = {
			 pageNum  : 1,
			 list     : []
		}
	}
	
	componentDidMount(){
		this.loadUserList();
	}
	
	loadUserList(){
		_user.getUserList(this.state.pageNum)
			.then(res => {
				console.log(res);
				this.setState(res);
			},err =>{
				_util.errorTips(err);
			})
	}
	
	onChangePagination(page){
		this.setState({
			pageNum: page,
		},() => {
			this.loadUserList();
		});
	}
	
	render(){
		const tbodyList = this.state.list.map((user,index) => {
			return (
				<tr key={index}>
					<td>{user.id}</td>
					<td>{user.username}</td>
					<td>{user.email}</td>
					<td>{user.phone}</td>
					<td>{new Date(user.createTime).toLocaleString()}</td>
				</tr>
			)
		})
		
		return (
			<div id="page-wrapper">
				<PageTitle title='用户列表' />
				<TableView theaders={['id','用户名','邮箱','注册电话','注册时间']} >
					{tbodyList}
				</TableView>
				{this.state.list.length > 0 
					? <Pagination 
						onChange={page => {this.onChangePagination(page)}}  
						current={this.state.pageNum}  
						total={this.state.total} /> 
						
					: ''
				}
			</div>
		)
	}
}

export default UserList;